<template>
  <el-form-item label="学校名称" prop="schoolId">
    <el-select
      @change="schoolChange"
      v-model.trim="selectData.schoolId"
      clearable
      placeholder="请选择学校"
      :disabled="schoolType"
      filterable
      class="!w-240px"
    >
      <el-option
        v-for="item in schoolList"
        :key="item.id"
        :label="item.schoolName"
        :value="item.id"
      />
    </el-select>
  </el-form-item>
  <el-form-item label="机构名称" prop="collegeId">
    <el-select
      @change="changeCollege"
      v-model.trim="selectData.collegeId"
      clearable
      placeholder="请选择机构"
      :disabled="!selectData.schoolId || schoolType"
      filterable
      class="!w-240px"
    >
      <el-option
        v-for="item in collegeList"
        :key="item.id"
        :label="item.collegeName"
        :value="item.id"
      />
    </el-select>
  </el-form-item>
  <el-form-item label="专业名称" prop="majorId">
    <el-select
      @change="changeMajor"
      v-model.trim="selectData.majorId"
      clearable
      placeholder="请选择专业"
      :disabled="!selectData.schoolId || schoolType"
      filterable
      class="!w-240px"
    >
      <el-option
        v-for="item in majorList"
        :key="item.id"
        :label="item.majorName"
        :value="item.id"
      />
    </el-select>
  </el-form-item>
  <el-form-item label="班级名称" prop="classesId">
    <el-select
      v-model.trim="selectData.classesId"
      clearable
      @change="changeClasses"
      placeholder="请选择班级"
      :disabled="!selectData.schoolId || schoolType"
      filterable
      class="!w-240px"
    >
      <el-option
        v-for="item in classesList"
        :key="item.id"
        :label="item.classesName"
        :value="item.id"
      />
    </el-select>
  </el-form-item>
</template>
<script setup lang="ts">
import * as SchoolApi from '@/api/cmis/school'
import * as CollegeApi from '@/api/cmis/college'
import * as MajorApi from '@/api/cmis/major'
import * as ClassesApi from '@/api/cmis/classes'

const props = defineProps({
  useType: Boolean,
  schoolType: Boolean
})

const schoolList = ref([]) //学校列表
const collegeList = ref([]) //机构列表
const majorList = ref([]) //专业列表
const classesList = ref([]) //机构列表

const schoolType = ref(props.schoolType ? props.schoolType : false) // 机构下拉框状态

const selectData = ref({
  schoolId: undefined,
  collegeId: undefined,
  majorId: undefined,
  classesId: undefined
})

/** 初始化 **/
onMounted(() => {
  getSchoolLists()
  getCollegeLists()
  getMajorList()
  getClassesLists()
})

// 接收编辑时回显的参数
const getAllList = (editValue: any) => {
  selectData.value = {
    schoolId: editValue.schoolId,
    collegeId: editValue.collegeId,
    majorId: editValue.majorId,
    classesId: editValue.classesId
  }
}

// 获取学校列表
const getSchoolLists = async () => {
  const res = await SchoolApi.getSchoolList(selectData.value)
  schoolList.value = res
}

// 获取机构列表
const getCollegeLists = async () => {
  const res = await CollegeApi.getCollegeList(selectData.value)
  collegeList.value = res
}

// 获取专业列表
const getMajorList = async () => {
  const res = await MajorApi.getMajorList({
    schoolId: selectData.value.schoolId,
    collegeId: selectData.value.collegeId
  })
  majorList.value = res
}

// 获取班级列表
const getClassesLists = async () => {
  const res = await ClassesApi.getClassesList(selectData.value)
  classesList.value = res
}

// 选择学校
const schoolChange = async (value: any) => {
  selectData.value.collegeId = undefined
  selectData.value.majorId = undefined
  selectData.value.classesId = undefined
  if (value) {
    // 加载机构列表
    getCollegeLists()
    // 加载专业列表
    getMajorList()
    // 加载班级列表
    getClassesLists()
  }
}

// 选择机构
const changeCollege = async () => {
  selectData.value.majorId = undefined
  selectData.value.classesId = undefined
  // 加载专业列表
  getMajorList()
  // 加载班级列表
  getClassesLists()
}

// 选择专业
const changeMajor = async () => {
  selectData.value.classesId = undefined
  // 加载班级列表
  getClassesLists()
}

const emit = defineEmits(['SchoolRegister'])
//选择班级
const changeClasses = (id) => {
  const classesInfo = classesList.value.find((it) => it.id === id)
  const data = {
    grade: classesInfo?.grade
  }
  emit('SchoolRegister', data)
}
// 清空选项
const resetFormData = () => {
  selectData.value = {
    schoolId: undefined,
    collegeId: undefined,
    majorId: undefined,
    classesId: undefined
  }
}

// 暴露方法和属性给父组件
defineExpose({ selectData, resetFormData, getAllList })
</script>
